<template>
    <div class="conter">
        <div id="myChart" style="width:700px;height:500px; "></div>
    </div>
</template>
  
<script>
import { getMajorPassScoreVo } from '../api/statistics';

export default {
    data() {
        return {
            majordata:[],
            totalPersondata:[],
            passPersondata:[]
        };
    },

    methods: {
        //获取数据
        async  getComputedStyle(){
          await getMajorPassScoreVo().then((res) => {
            // console.log(res.data);
            const getdata=res.data.data;
            getdata.map((i)=>{
                this.majordata.push(i.major)
                this.totalPersondata.push(i.totalPerson)
                this.passPersondata.push(i.passPerson)
                this.drawLine();
            })
            this.count = res.data.data
        })
        },

        drawLine() {
            // console.log(this.majordata,this.totalPersondata,this.passPersondata);
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("myChart"));
            // console.log(myChart);
            // 绘制图表
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '各专业考试人数'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.majordata
                },
                yAxis: {
                    nameTextStyle: {
                        padding: [15, 15, 0, -3]
                    },
                    name: '单位(人)',
                    type: 'value'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                series: [
                    {
                        name: '参考人数',
                        data: this.totalPersondata,
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                            normal: {
                                label: {
                                    // show: true, //开启显示
                                    formatter: "参考人数\n" + "{c}" + "人",
                                    show: true,
                                    position: 'top', //在上方显示
                                },
                                color: '#24D2D3',
                                // 柱形图圆角，初始化效果
                                barBorderRadius: [30, 30, 30, 30]
                            }
                        },
                    },
                    {
                        name: '及格人数',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                            normal: {
                                color: '#73A0FA',
                                // 柱形图圆角，初始化效果
                                barBorderRadius: [30, 30, 30, 30],
                                label: {
                                    show: true, //开启显示
                                    formatter: "及格人数\n" + "{c}" + "人",
                                    position: 'top', //在上方显示
                                },
                            }
                        },
                        data: this.passPersondata
                    },

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
    },
    mounted() {
        this.getComputedStyle();
        // this.drawLine();
    },
};
</script>
<style lang="scss"></style>
  